<script setup lang="js">
import {defineProps, computed, defineEmits} from 'vue'
import {copyToClipBoard} from '@share/utils/CommonUtils.js'
import {ElMessage} from "element-plus";

const {name, num, notifyMessage, copyNameToClipBoard, showNum, truncated, size} = defineProps({
  "size": {
    type: String,
    default: "default"
  },
  "name": {},
  "num": {},
  "showNum": {
    default: true
  },
  "notifyMessage": {
    default: {
      "success": "已复制至剪切板",
      "failed": "复制失败"
    }
  },
  //是否隐藏过长的文字
  "truncated": {
    default: false
  },
  'copyNameToClipBoard': {
    default: true,
  }
})

const emit = defineEmits(['click'])

const copyName = (name) => {
  if (!copyNameToClipBoard) {
    emit('click')
    return;
  }
  copyToClipBoard(name).then(res => {
    ElMessage({
      message: notifyMessage.success,
      duration: 500
    })
  })
      .catch(res => {
        ElMessage({
          message: notifyMessage.failed,
          type: "error",
          duration: 1000
        })
      })
}

const userName = computed(() => {
  if (num !== undefined) {
    return `${name}#${num}`
  }
  return name
})

</script>

<template>
  <span class="summoner-name"
        @click="copyName(userName)">
     <slot :summonerName="name" :tagLine="num" name="default">
    <el-text
        line-clamp="1"
        :truncated="truncated"
        :size="size"
    >
      {{ `${name}${showNum === true ? '#' + num : ''}` }}
      </el-text>
    </slot>

  </span>

</template>

<style scoped>
.summoner-name {
  &:hover {
    cursor: pointer;
  }
}
</style>